<template>
        <el-text type="primary" size="large" tag="b">3,添加在父容器上的语法 display:flex; flex-wrap: 是否进行换行处理</el-text>
        <div class="content_box">
            <div class="child_content_box">
                <el-text class="mx-1">flex-wrap:nowrap; 默认值</el-text>
                <div class="flex_nowrap">
                    <div class="child_before_box">1</div>
                    <div class="child_before_box">2</div>
                    <div class="child_before_box">3</div>
                    <div class="child_before_box">4</div>
                    <div class="child_before_box">5</div>
                    <div class="child_before_box">6</div>
                </div>
            </div>
            <div class="child_content_box">
                <el-text class="mx-1">flex-wrap:wrap;换行处理</el-text>
                <div class="flex_wrap">
                    <div class="child_before_box">1</div>
                    <div class="child_before_box">2</div>
                    <div class="child_before_box">3</div>
                    <div class="child_before_box">4</div>
                    <div class="child_before_box">5</div>
                    <div class="child_before_box">6</div>
                </div>
            </div>
            <div class="child_content_box">
                <el-text class="mx-1">flex-wrap:wrap-reverse;反向换行</el-text>
                <div class="wrap_reverse">
                    <div class="child_before_box">1</div>
                    <div class="child_before_box">2</div>
                    <div class="child_before_box">3</div>
                    <div class="child_before_box">4</div>
                    <div class="child_before_box">5</div>
                    <div class="child_before_box">6</div>
                </div>
            </div>
        </div>
</template>
<script setup >

</script>
<style scoped lang="scss">
.content_box {
    display: flex;
    flex-wrap: wrap;
}

.child_content_box {
    margin: 5px;
}

.flex_nowrap {
    width: 200px;
    height: 200px;
    border: 2px solid #E4E7ED;
    display: flex;
    flex-wrap: nowrap;
}

.flex_wrap {
    width: 200px;
    height: 200px;
    border: 2px solid #E4E7ED;
    display: flex;
    flex-wrap: wrap;
}

.wrap_reverse {
    width: 200px;
    height: 200px;
    border: 2px solid #E4E7ED;
    display: flex;
    flex-wrap: wrap-reverse;
}

.child_before_box {
    width: 40px;
    height: 40px;
    margin: 2px;
    background-color: red;
}

.child_before_box:nth-child(2) {
    background-color: #F56C6C;
}

.child_before_box:nth-child(3) {
    background-color: yellow;
}

.child_before_box:nth-child(4) {
    background-color: green;
}</style>